<div class="market-panel">
    <div class="market-panel-header">
        <div class="dropdown-select mr20p">
            <div class="dropdown">
                <button class="btn dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                    {{ranges[rangeIndex].show}}
                    <span class="dropdown-block">
                        <span class="caret"></span>
                    </span>
                </button>
                <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
                    <li *ngFor="let item of ranges; let i=index;" (click)="onRangeChange(i)"><a>{{item.show}}</a></li>
                </ul>
            </div>
        </div>
        <div class="dropdown-select mr20p">
            <div class="dropdown">
                <button class="btn dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                    <img class="s-icon" [src]="lineTypes[lineTypeIndex].icon">{{lineTypes[lineTypeIndex].show}}
                    <span class="dropdown-block">
                        <span class="caret"></span>
                    </span>
                </button>
                <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
                    <li *ngFor="let item of lineTypes; let i=index;" (click)="onLineTypeChange(i)">
                        <a><img class="s-icon" [src]="item.icon">{{item.show}}</a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="dropdown-input mr20p">
            <div class="dropdown">
                <button class="btn dropdown-toggle" type="button" id="chartDropdowm" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                    <i class="glyphicon glyphicon-plus"></i> 商品比较
                </button>
                <div class="dropdown-menu" aria-labelledby="chartDropdowm">
                    <input class="form-control" type="text">
                    <ul class="select-list list-unstyled">
                        <li class="select-list-item">AAAAAAAAA</li>
                    </ul>
                </div>
            </div>
        </div>
        <div id="dropdown-stat" class="dropdown-stat mr20p">
            <div class="dropdown">
                <button class="btn dropdown-toggle" type="button" (click)="onStatShow($event)">
          <i class="glyphicon glyphicon-plus"></i> 技术指标
        </button>
                <div *ngIf="showStatPanle" class="dropdown-content">
                    <div class="stat">
                        <div class="stat-header">
                            <div class="stat-title">
                                MACD
                            </div>
                            <i *ngIf="!isLoading" class="stat-operate glyphicon" [ngClass]="{'glyphicon-remove': macdStat, 'glyphicon-plus': !macdStat}" (click)="showMACDStat()"></i>
                        </div>
                        <div *ngIf="macdStat" class="stat-content">
                            <div class="stat-list">
                                <div class="stat-item">
                                    <div class="stat-item-header">
                                        <div class="stat-item-type">
                                            MACD柱
                                        </div>
                                        <div class="stat-item-color" [style.background]="macdColor.macd">
                                        </div>
                                    </div>
                                    <div class="stat-item-desc">
                                        短期
                                    </div>
                                    <input class="stat-item-input form-control" type="text" [(ngModel)]="macdStat.short.value" (blur)="onBlur($event, 'macdStat', 'short')">
                                </div>
                                <div class="stat-item">
                                    <div class="stat-item-header">
                                        <div class="stat-item-type">
                                            DIF
                                        </div>
                                        <div class="stat-item-color" [style.background]="macdColor.dif">
                                        </div>
                                    </div>
                                    <div class="stat-item-desc">
                                        长期
                                    </div>
                                    <input class="stat-item-input form-control" type="text" [(ngModel)]="macdStat.long.value" (blur)="onBlur($event, 'macdStat', 'long')">
                                </div>
                                <div class="stat-item">
                                    <div class="stat-item-header">
                                        <div class="stat-item-type">
                                            DEA
                                        </div>
                                        <div class="stat-item-color" [style.background]="macdColor.dea">
                                        </div>
                                    </div>
                                    <div class="stat-item-desc">
                                        M
                                    </div>
                                    <input class="stat-item-input form-control" type="text" [(ngModel)]="macdStat.m.value" (blur)="onBlur($event, 'macdStat', 'm')">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="stat">
                        <div class="stat-header">
                            <div class="stat-title">
                                BOLL
                            </div>
                            <i class="stat-operate glyphicon" [ngClass]="{'glyphicon-remove': bollStat, 'glyphicon-plus': !bollStat}" (click)="showBollStat()"></i>
                        </div>
                        <div *ngIf="bollStat" class="stat-content">
                            <div class="stat-list">
                                <div class="stat-item">
                                    <div class="stat-item-header">
                                        <div class="stat-item-type">
                                            LOW
                                        </div>
                                        <div class="stat-item-color" [style.background]="bollColor.low">
                                        </div>
                                    </div>
                                    <div class="stat-item-desc">
                                        标准差
                                    </div>
                                    <input class="stat-item-input form-control" type="text" [(ngModel)]="bollStat.stand.value" (blur)="onBlur($event, 'bollStat', 'stand')">
                                </div>
                                <div class="stat-item">
                                    <div class="stat-item-header">
                                        <div class="stat-item-type">
                                            MID
                                        </div>
                                        <div class="stat-item-color" [style.background]="bollColor.mid">
                                        </div>
                                    </div>
                                    <div class="stat-item-desc">
                                        宽度
                                    </div>
                                    <input class="stat-item-input form-control" type="text" [(ngModel)]="bollStat.width.value" (blur)="onBlur($event, 'bollStat', 'width')">
                                </div>
                                <div class="stat-item">
                                    <div class="stat-item-header">
                                        <div class="stat-item-type">
                                            UP
                                        </div>
                                        <div class="stat-item-color" [style.background]="bollColor.up">
                                        </div>
                                    </div>
                                    <div class="stat-item-desc">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="stat">
                        <div class="stat-header">
                            <div class="stat-title">
                                RSI
                            </div>
                            <i class="stat-operate glyphicon" [ngClass]="{'glyphicon-remove': rsiStat, 'glyphicon-plus': !rsiStat}" (click)="showRSIStat()"></i>
                        </div>
                        <div *ngIf="rsiStat" class="stat-content">
                            <div class="stat-list">
                                <div class="stat-item">
                                    <div class="stat-item-header">
                                        <div class="stat-item-type">
                                            RSI1
                                        </div>
                                        <div class="stat-item-color" [style.background]="rsiColor.rsi1">
                                        </div>
                                    </div>
                                    <div class="stat-item-desc">
                                    </div>
                                    <input class="stat-item-input form-control" type="text" [(ngModel)]="rsiStat.rsi1.value" (blur)="onBlur($event, 'rsiStat', 'rsi1')">
                                </div>
                                <div class="stat-item">
                                    <div class="stat-item-header">
                                        <div class="stat-item-type">
                                            RSI2
                                        </div>
                                        <div class="stat-item-color" [style.background]="rsiColor.rsi2">
                                        </div>
                                    </div>
                                    <div class="stat-item-desc">
                                    </div>
                                    <input class="stat-item-input form-control" type="text" [(ngModel)]="rsiStat.rsi2.value" (blur)="onBlur($event, 'rsiStat', 'rsi2')">
                                </div>
                                <div class="stat-item">
                                    <div class="stat-item-header">
                                        <div class="stat-item-type">
                                            RSI3
                                        </div>
                                        <div class="stat-item-color" [style.background]="rsiColor.rsi3">
                                        </div>
                                    </div>
                                    <div class="stat-item-desc">
                                    </div>
                                    <input class="stat-item-input form-control" type="text" [(ngModel)]="rsiStat.rsi3.value" (blur)="onBlur($event, 'rsiStat', 'rsi3')">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="stat">
                        <div class="stat-header">
                            <div class="stat-title">
                                BIAS
                            </div>
                            <i class="stat-operate glyphicon" [ngClass]="{'glyphicon-remove': biasStat, 'glyphicon-plus': !biasStat}" (click)="showBIASStat()"></i>
                        </div>
                        <div *ngIf="biasStat" class="stat-content">
                            <div class="stat-list">
                                <div class="stat-item">
                                    <div class="stat-item-header">
                                        <div class="stat-item-type">
                                            BIAS1
                                        </div>
                                        <div class="stat-item-color" [style.background]="biasColor.bias1">
                                        </div>
                                    </div>
                                    <div class="stat-item-desc">
                                    </div>
                                    <input class="stat-item-input form-control" type="text" [(ngModel)]="biasStat.bias1.value" (blur)="onBlur($event, 'biasStat', 'bias1')">
                                </div>
                                <div class="stat-item">
                                    <div class="stat-item-header">
                                        <div class="stat-item-type">
                                            BIAS2
                                        </div>
                                        <div class="stat-item-color" [style.background]="biasColor.bias2">
                                        </div>
                                    </div>
                                    <div class="stat-item-desc">
                                    </div>
                                    <input class="stat-item-input form-control" type="text" [(ngModel)]="biasStat.bias2.value" (blur)="onBlur($event, 'biasStat', 'bias2')">
                                </div>
                                <div class="stat-item">
                                    <div class="stat-item-header">
                                        <div class="stat-item-type">
                                            BIAS3
                                        </div>
                                        <div class="stat-item-color" [style.background]="biasColor.bias3">
                                        </div>
                                    </div>
                                    <div class="stat-item-desc">
                                    </div>
                                    <input class="stat-item-input form-control" type="text" [(ngModel)]="biasStat.bias3.value" (blur)="onBlur($event, 'biasStat', 'bias3')">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="stat">
                        <div class="stat-header">
                            <div class="stat-title">
                                MA
                            </div>
                            <i class="stat-operate glyphicon" [ngClass]="{'glyphicon-remove': maStat, 'glyphicon-plus': !maStat}" (click)="showMAStat()"></i>
                        </div>
                        <div *ngIf="maStat" class="stat-content">
                            <div class="stat-list">
                                <div class="stat-item">
                                    <div class="stat-item-header">
                                        <div class="stat-item-type">
                                            MA
                                        </div>
                                        <div class="stat-item-color" [style.background]="maColor.ma">
                                        </div>
                                    </div>
                                    <div class="stat-item-desc">
                                    </div>
                                    <input class="stat-item-input form-control" type="text" [(ngModel)]="maStat.ma.value" (blur)="onBlur($event, 'maStat', 'ma')">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="stat">
                        <div class="stat-header">
                            <div class="stat-title">
                                EMA
                            </div>
                            <i class="stat-operate glyphicon" [ngClass]="{'glyphicon-remove': emaStat, 'glyphicon-plus': !emaStat}" (click)="showEMAStat()"></i>
                        </div>
                        <div *ngIf="emaStat" class="stat-content">
                            <div class="stat-list">
                                <div class="stat-item">
                                    <div class="stat-item-header">
                                        <div class="stat-item-type">
                                            EMA
                                        </div>
                                        <div class="stat-item-color" [style.background]="emaColor.ema">
                                        </div>
                                    </div>
                                    <div class="stat-item-desc">
                                    </div>
                                    <input class="stat-item-input form-control" type="text" [(ngModel)]="emaStat.ema.value" (blur)="onBlur($event, 'emaStat', 'ema')">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="pull-right operate">
            <span class="mr20p" (click)=(resetConfig())><i class="glyphicon glyphicon-refresh"></i>重置</span>
            <!-- <span *ngIf="status === 'big'"><a [routerLink]="['/index/market', symbol]"><i class="glyphicon glyphicon-resize-small"></i>小屏</a></span> -->
            <!-- <span *ngIf="status !== 'big'"><a [routerLink]="['/index/market', symbol, 'big']"><i class="glyphicon glyphicon-resize-full"></i>全屏</a></span> -->
        </div>
    </div>
    <div class="market-panel-content" [style.height]="status === 'big' ? '700px':'500px'">
        <echarts-ng2 #echarts [option]="option" [style]="{'width': '100%', 'height': '100%'}"></echarts-ng2>
    </div>
    <!--<div class="market-panel-footer range">
    <ul class="list-unstyled range-list clearfix">
      <li class="range-item active">5年</li>
      <li class="range-item">1年</li>
      <li class="range-item">3月</li>
      <li class="range-item">1月</li>
      <li class="range-item">1周</li>
      <li class="range-item">1天</li>
      <li class="range-item">日期范围</li>
    </ul>
  </div>-->
</div>